<template>
	<view class="box">
		<!-- 一级分类 -->
		<view class="cate">
			<scroll-view scroll-x="true" :enable-flex="true" class="f-w cate-scroll" style="white-space: nowrap;">
				<view class="cate-demo" :class="active===index?'showColor':''" v-for="(item,index) of category"
					:key="index" @click="checkNav(index)">
					<view class="cate-img f-w">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="cate-name tr">{{item.cate_name}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 二级分类 -->
		<view class="list flex">
			<view class="cate2">
				<view :class="cate2_active===index?'cate2Color':''" v-for="(item,index) of cate2_list" :key="index"
					@click="checkCate2(index)">
					<view>{{item.cate_name}}</view>
					<!-- 背景 -->
					<view class="bg"></view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="msg">
				<scroll-view scroll-y="true" class="list2" @scrolltolower="scrolltolower">
					<view class="card f-w" v-for="(item,index) in productList" :key="index"
						@click="goDetail(item.product_id)">
						<!-- 商品图片 -->
						<view class="card-img f-w">
							<image :src="item.image" mode=""></image>
							<!-- 热销产品标签 -->
							<view class="tag" v-if="false">
								<image src="/static/index/tx_3@2x.png" mode=""></image>
							</view>
						</view>
						<!-- 商品详细 -->
						<view class="card-right">
							<view class="one f28 bold hide-line">{{item.store_name}}</view>
							<view class="two">月销{{item.sales}}{{item.unit_name}}</view>
							<view class="three" v-if="item.product_type == 1">秒杀限定{{item.seckillActive.all_pay_count}}份
							</view>
							<view class="four fw-bt">
								<!-- 价格 -->
								<view class="four-left f-w">
									<view class="price1 f28 bold">￥{{item.productAttrValue.attrValue[0].price}}</view>
									<view class="price2"
										v-if="item.productAttrValue.attrValue[0].price <  item.productAttrValue.attrValue[0].ot_price">
										￥{{item.productAttrValue.attrValue[0].ot_price}}</view>
								</view>
								<!-- 购物-->
								<view class="cart1 f-w" @click.stop="">
									<rules :product_id="item.product_id">
										<view class="cart1-add f-w">
											<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode="">
											</image>
										</view>
									</rules>
									<!-- <view class="cart1-add f-w"
										@click.stop="addcart(item.product_id,item.productAttrValue.attrValue[0].unique,item.product_type)">
										<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode="">
										</image>
									</view> -->
								</view>
							</view>

						</view>
					</view>
					<u-loadmore :status="productStatus" v-if="productStatus" />
				</scroll-view>
			</view>
		</view>
		<!-- 购物车 -->
		<!-- <cart v-if="false"></cart> -->
	</view>
</template>

<script>
	import {
		categoryLst
	} from '@/api/category'

	import {
		getProductSpuListApi
	} from '@/api/product'
	import Cache from '@/util/cache.js'
	import rules from '@/components/rules.vue'
	// import cart from '@/components/cart.vue'
	export default {
		components: {
			// cart,
			rules
		},
		data() {
			return {
				active: 0, //  一级分类index
				cate2_active: 0, // 二级分类 index
				cate_list: [],
				cate2_list: [], //二级分类
				list2: [],
				productList: [], //商品列表
				category: [], //总分类
				SearchProduct: {
					limit: 15,
					page: 1,
					cate_ids: 0,
					cate_id: 0,
					isAddProduct: false //是否追加商品到 productlist
				},
				productStatus: '',
				e: {}
			}
		},
		onLoad(e) {
			console.log(e)
		},
		onShow() {
			this.categoryLst()
			// this.active=3



		},
		mounted() {

		},
		methods: {
			// 加入购物车
			addcart(id, unique, type) {
				uni.showLoading({
					mask: true
				})
				let data = {
					cart_num: 1,
					is_new: 0,
					product_attr_unique: unique,
					product_id: id,
					product_type: type
				}
				this.$request('user/cart/create', data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: "添加成功"
						})
					}
				})
			},
			categoryLst() {
				categoryLst().then(res => {
					this.category = res.data

					let switchid = uni.getStorageSync('switchid')
					// uni.removeStorageSync('switchid')
					if (switchid) {
						res.data.forEach((item, index) => {
							if (item.store_category_id == switchid) {
								this.active = index
								this.cate2_list = this.category[index].children
								this.cate2_active = 0
								// if (this.cate2_list[index].children) {
								// 	this.SearchProduct.cate_ids = this.cate2_list[0].store_category_id
								// } else {
								// 	this.SearchProduct.cate_id = this.cate2_list[0].store_category_id
								// }
								this.SearchProduct.cate_id = this.cate2_list[0].store_category_id
							}

						})
						// this.active=0
						// uni.removeStorageSync('switchid')
					} else {
						console.log("?????")
						this.cate2_list = this.category[0].children
						// if (this.cate2_list[0].children) {
						// 	this.SearchProduct.cate_ids = this.cate2_list[0].store_category_id
						// } else {
						// 	this.SearchProduct.cate_id = this.cate2_list[0].store_category_id
						// }
						this.SearchProduct.cate_id = this.cate2_list[0].store_category_id
					}



					console.log("*（）*（")

					this.productSpuList()

				}).catch(err => {

				})
			},
			productSpuList() {
				// let mar = JSON.parse(Cache.get('market'))
				let mar = JSON.parse(uni.getStorageSync('market'))
				this.SearchProduct.mar_id = mar.id
				// this.SearchProduct.cate_id =''
				this.SearchProduct.cate_ids = ''
				this.productStatus = 'loading'
				console.log(this.SearchProduct ,'***********')
				getProductSpuListApi(this.SearchProduct).then(res => {
					if (!res.data.list.length) {
						this.productStatus = 'nomore'
					} else {
						this.productStatus = 'loadmore'
					}
					if (this.SearchProduct.isAddProduct) {
						this.productList.push(...res.data.list)
					} else {
						this.productList = res.data.list
					}
					if (this.productList.length < this.SearchProduct.limit) {
						this.productStatus = 'nomore'
					}

				}).catch(err => {

				})
			},

			// 切换一级分类
			checkNav(index) {
				this.active = index;
				uni.setStorageSync('switchid', this.category[index].store_category_id)
				this.cate2_active = 0
				this.cate2_list = this.category[index].children
				console.log(this.category[index],'切换一级分类')
				// if (this.SearchProduct.cate_id != 0) {
				// 	this.SearchProduct.cate_id = this.cate2_list[0].store_category_id
				// } else {
				// 	this.SearchProduct.cate_ids = this.cate2_list[0].store_category_id
				// }
				this.SearchProduct.cate_id = this.cate2_list[0].store_category_id
				this.SearchProduct.page = 1
				this.SearchProduct.isAddProduct = false
				this.productSpuList()
			},
			// 切换二级分类
			checkCate2(index) {
				this.cate2_active = index
				// if (this.SearchProduct.cate_id != 0) {
				// 	this.SearchProduct.cate_id = this.cate2_list[index].store_category_id
				// } else {
				// 	this.SearchProduct.cate_ids = this.cate2_list[index].store_category_id
				// }
				this.SearchProduct.cate_id = this.cate2_list[index].store_category_id
				console.log(this.category[index],'切换二级分类')
				this.SearchProduct.page = 1
				this.SearchProduct.isAddProduct = false
				this.productSpuList()
			},
			// 获取二级分类
			scrolltolower() {
				console.log('二级分类商品加载更多');
				this.SearchProduct.page += 1
				this.SearchProduct.isAddProduct = true
				this.productSpuList()
			},
			// 商品详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/client/shop/shop-detail/shop-detail?id=' + id
				})
			},
			// 加入购物车
			cartAdd(id, index) {
				console.log('购物车');
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.box {
		.showColor {
			color: #109C7A;
		}

		.myimg {
			width: 100%;
			height: 100%;
		}

		// 一级
		.cate {
			padding: 24rpx 30rpx 20rpx;

			.cate-scroll {
				box-sizing: border-box;
			}

			.cate-demo {
				margin-right: 42rpx;
				flex-shrink: 0;
			}

			.cate-img {
				margin-top: 24rpx;
				width: 84rpx;
				height: 84rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.cate-name {
				margin-top: 5rpx;
				font-size: 22rpx;
			}
		}

		//二级 
		.list {
			width: 750rpx;
			height: calc(100vh - 184rpx);

			.cate2 {
				width: 150rpx;
				height: calc(100vh - 184rpx);
				overflow-y: auto;
				flex-shrink: 0;
				font-size: 26rpx;
				background: #F6F6F6;

				&>view {
					position: relative;
					width: 150rpx;
					height: 110rpx;
					line-height: 110rpx;
					padding-left: 26rpx;
					text-align: left;
					border-bottom: 1rpx solid #eee;
					background: #F6F6F6;
					box-sizing: border-box;

					.bg {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 8rpx;
						height: 30rpx;
						background: #F6F6F6;
						border-radius: 0rpx 4rpx 4rpx 0rpx;
					}
				}

				.cate2Color {
					background-color: #fff;
					font-weight: bold;

					.bg {
						background: #109C7A;
					}
				}

			}

			.msg {
				flex: 1;
				background-color: #fff;

				.list2 {
					height: calc(100vh - 184rpx);
					padding: 0 30rpx 0 20rpx;
					box-sizing: border-box;

					.card {
						// height: 250rpx;
						position: relative;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #eee;

						.card-img {
							position: relative;
							flex-shrink: 0;
							width: 160rpx;
							height: 160rpx;

							image {
								@extend .myimg;
								border-radius: 12rpx;
							}

							.tag {
								position: absolute;
								left: 0;
								top: 0;
								width: 54rpx;
								height: 50rpx;
								background: linear-gradient(178deg, #FF7785 0%, #FE3734 46%, #FF3D1E 100%);
								border-radius: 12rpx 0rpx 0rpx 0rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}

						.card-right {
							position: relative;
							flex: 1;
							margin-left: 15rpx;
							min-height: 160rpx;
							overflow: hidden;

							.one {
								width: 376rpx;
							}

							.two {
								margin: 10rpx 0;
								color: #666;
								font-size: 22rpx;
							}

							.three {
								width: 120rpx;
								height: 32rpx;
								line-height: 32rpx;
								text-align: center;
								font-size: 20rpx;

								color: #AF1919;
								background: rgba(16, 156, 122, 0);
								border: 1rpx solid #AF1919;
							}

							.four {
								position: absolute;
								right: 0;
								bottom: 0;
								width: 376rpx;
								height: 48rpx;

								.price1 {
									color: #F83535;
								}

								.price2 {
									margin-left: 10rpx;
									color: #999;
									font-size: 26rpx;
									text-decoration: line-through;
								}

								.cart1 {
									input {
										width: 60rpx;
										font-weight: 600;
										text-align: center;
									}

									.cart1-jian,
									.cart1-add {
										width: 48rpx;
										height: 48rpx;

										image {
											@extend .myimg;
										}
									}
								}
							}

						}
					}
				}
			}
		}
	}
</style>
